<template>
  <div>
    <div class="animate-wrapper">
      <div v-for="(item,key) in arr_data" :class="item.moveitem_class" :name="item.name_attr" :style="{zIndex:item.zindex}" v-on:click.parent="cardclick($event)">
        <div :class="item.fontimg_class">
          <div class="cardImg">
            <img class="prizecardimg"
                 :src="item.url"
                 alt=""></div>
          <p class="prizecardname">{{item.name}}</p></div>
        <div :class="item.reverseimg_class"></div>
      </div>
    </div>
    <havefrequency @close="clickClose"></havefrequency>
    <nofrequency @close="clickClose"></nofrequency>
  </div>

</template>

<script type="text/ecmascript-6">
  var iphonex_pic = require('../../static/images/iphonex.png')
  var money_b=require('../../static/images/500.png')
  var xiaomi=require('../../static/images/xiaomi.png')
  var money_l=require('../../static/images/88.png')
  var lucky=require('../../static/images/gift.png')
  var thanks=require('../../static/images/thanks.png')
  import havefrequency from './havefrequency.vue'
  import nofrequency from './nofrequency.vue'
  export default {
        name:'cardIndex',
        data () {
            return {
              clickSwitch:!1,
              arr_data:[{moveitem_class:'move-item',zindex:1,reverseimg_class:'reverseimg transtion front',fontimg_class:'frontimg resverse',name_attr:'move',name:'0元购iPhoneX',url:iphonex_pic},
                        {moveitem_class:'move-item',zindex:2,reverseimg_class:'reverseimg transtion front',fontimg_class:'frontimg resverse',name_attr:'move',name:'500元',url:money_b},
                        {moveitem_class:'move-item',zindex:3,reverseimg_class:'reverseimg transtion front',fontimg_class:'frontimg resverse',name_attr:'move',name:'小米mix2',url:xiaomi},
                        {moveitem_class:'move-item',zindex:4,reverseimg_class:'reverseimg transtion front',fontimg_class:'frontimg resverse',name_attr:'move',name:'88元',url:money_l},
                        {moveitem_class:'move-item',zindex:5,reverseimg_class:'reverseimg transtion front',fontimg_class:'frontimg resverse',name_attr:'move',name:'幸运奖',url:lucky},
                        {moveitem_class:'move-item',zindex:6,reverseimg_class:'reverseimg transtion front',fontimg_class:'frontimg resverse',name_attr:'move',name:'谢谢参与',url:thanks}]
            }
        },
        components:{havefrequency,nofrequency},
        mounted(){
          this.clickClose(1)
        },
        methods:{
          //卡牌点击
          cardclick:function(a){
            var e=this
            if (e.clickSwitch) {
              e.clickSwitch = !1, $(a.currentTarget).children().hide(), $(".outAlert").show(), $(".outIn").animate({
                top: "7rem"
              },function(){$(".outIn").addClass("outIn3")});
              var a = $(a.currentTarget).children();
              setTimeout(function () {
                //次数用完时的弹窗
                if ( 0 == e.clickNum) {
                  $(".show-award").show(),$(".outAlert").hide(), a.show(), $(".outIn").removeClass("outIn3"), $(".outIn").css({
                    top: "-5.75rem"
                  })
                }else{
                  //次数没用完时的弹窗
                  $(".popShowPrize").show(),  a.show(), $(".outAlert").hide(), $(".outIn").removeClass("outIn3"), $(".outIn").css({
                    top: "-5.75rem"
                  });
                }
              },800)
              }
          },
          clickClose: function (e) {
            var a = this;
            //更多活动
            //a.clickNum <= 5 && $(".moreAct").addClass("moreFadein"),
            if(1 == e ){
              (a.spreadAllNoAnimate(), a.openAllNoAnimate()
                , setTimeout( () =>{
                a.frontimgShowAll(function () {
                  setTimeout( ()=> {
                    a.arr_data.forEach(function (v,i) {
                      v.moveitem_class="transtion2 move-item"
                      v.name_attr="middle"
                    })
                    setTimeout( ()=> {
                      a.spreadAll(function () {
                        a.changeBg(), a.clickSwitch = !0
                      })
                    }, 500)
                  }, 200)
                })
              }, 1e3))
            }else{
              (a.togeAllNoAnimate(),a.spreadAll())
            }

          },
          spreadAllNoAnimate: function () {
            this.arr_data.forEach(function(v,i){
              v.name_attr="move"
            })
          },
          openAllNoAnimate: function () {
            this.arr_data.forEach(function (v,i) {
              v.fontimg_class="frontimg resverse front"
              v.reverseimg_class="reverseimg resverse"
            })
          },
          frontimgShowAll: function (e) {
            this.arr_data.forEach(function (v,i) {
              v.fontimg_class="frontimg resverse transtion"
            })
              setTimeout( ()=> {
                this.arr_data.forEach(function (v,i) {
                  v.fontimg_class="frontimg resverse"
                  v.reverseimg_class="reverseimg transtion front"
                })
            }, 300),
            e && setTimeout( () =>{
              e()
            }, 300)
          },
          spreadAll: function (e) {
            var a = this;
            a.clickSwitch = !1
            this.arr_data.forEach(function (v,i) {
              v.zindex=0
            })
            var i = 0,
              t = setInterval(function () {
                $(".move-item").eq(i).css({
                  zIndex: i
                }), $(".move-item").eq(i).addClass("transtion2"), $(".move-item").eq(i).attr({
                  name: "move"
                }), ++i == $(".move-item").length && (a.clickSwitch = !0, clearInterval(t), e && e())
              }, 200)
          },
          changeBg: function () {
            var e = 0,
              a = this;
            clearInterval(a.bgTimer), a.bgTimer = setInterval( ()=> {
              e == $(".reverseimg").length && (e = 0), $(".bg2").removeClass("bg2"), $(".reverseimg").eq(e).addClass("bg2"), e++
            }, 800)
          },
          togeAllNoAnimate: function () {
            $(".move-item").removeClass("transtion2"), $(".move-item").attr({
              name: "close"
            })
          }
        }
    }
</script>
<style>
  @import '../../static/css/index.css';

  .outAlert {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1113;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.6);
  }

  .outIn {
    position: absolute;
    left: 7rem;
    top: -5.75rem;
    width: 4.75rem;
    height: 5.75rem;
    -webkit-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    background: url(https://buyimg.bianxianmao.com/dist/ACTIVITY/activity/2017/09/21/e66e07a2-b391-4468-9445-08791c69c342) no-repeat center;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
  }

  .outIn2 {
    left: 7rem;
    top: 10rem;
  }

  .outIn3 {
    -webkit-animation: huang 0.3s infinite;
  }

  .transtion1 {
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
  }

  @-webkit-keyframes huang {
  0 {
    -webkit-transform: rotate(0) scale(1.3, 1.3);
  }
  25% {
    -webkit-transform: rotate(10deg) scale(1.3, 1.3);
  }
  50% {
    -webkit-transform: rotate(0) scale(1.3, 1.3);
  }
  75% {
    -webkit-transform: rotate(-10deg) scale(1.3, 1.3);
  }
  100% {
    -webkit-transform: rotate(0) scale(1.3, 1.3);
  }
  }
</style>
